<template>
  <el-container class="page">
    <el-row
      class="page-search"
      v-if="$getAuth('sysCompany:list')"
      title="点击右边按钮，展开搜索条件查询器"
    >
      <el-col :span="21" style="min-height:1px;">
        <ul class="search-list">
          <li v-for="item in searchTerm" :key="item.key" class="search-item">
            <label class="search-label">{{ item.label }}:</label>
            <el-input
              v-model="item.value"
              :label="item.label"
              size="small"
              placeholder="请输入查询条件"
              @keyup.native.enter="onSubmitSearchCompany"
            >
            </el-input>
          </li>
        </ul>
      </el-col>
      <el-col :span="2" class="search-btns" style="min-height:1px;">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="onSubmitSearchCompany"
          >查询</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-delete"
          style="margin:10px 0 0 ;"
          @click="onCanleSearch"
          >清空</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col class="page-fun">
        <el-button
          v-if="$getAuth('sysCompany:addCompany')"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="onCreateCompanyDialog"
          >添加公司</el-button
        >
      </el-col>
    </el-row>
    <main class="page-main" v-loading="loading">
      <el-table
        border
        :data="companyList"
        :row-style="setTableRowStyle"
        @row-click="onHandleViewCompany"
      >
        <el-table-column
          fixed
          label="序号"
          prop="index"
          type="index"
        ></el-table-column>
        <el-table-column label="公司名称" width="140px" prop="name">
        </el-table-column>
        <el-table-column label="公司地址" width="180px" prop="address">
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="公司管理员" width="180px" prop="adminName">
          <template slot-scope="scope">{{ scope.row.adminName }}</template>
        </el-table-column>
        <el-table-column label="联系电话" prop="telPhone">
          <template slot-scope="scope">{{ scope.row.telPhone }}</template>
        </el-table-column>
        <el-table-column width="240px" label="操作">
          <template slot-scope="scope">
            <div class="btn-opers">
              <el-link
                :underline="false"
                v-if="$getAuth('sysCompany:permission')"
                type="warning"
                @click.stop="onHandleSetCompany(scope.row.name, scope.row.id)"
              >
                设置权限
              </el-link>
              <el-link
                :underline="false"
                v-if="$getAuth('sysCompany:updateCompany')"
                @click.stop="onHandleEditCompany(scope.row.id)"
                >编辑</el-link
              >
              <el-link
                :underline="false"
                v-if="$getAuth('sysCompany:deleteCompany')"
                :type="scope.row.delFlag ? 'primary' : 'danger'"
                @click.stop="
                  onHandleDeleteCompany(scope.row.id, scope.row.delFlag)
                "
                >{{ scope.row.delFlag ? '启用' : '禁用' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="companyListTotal"
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
        ></el-pagination>
      </div>
    </main>

    <td-layer
      top="10vh"
      width="850px"
      :visible.sync="dialogBoolean"
      :title="
        dialogTitleNum > 0
          ? '编辑公司'
          : dialogTitleNum < 0
          ? '查看'
          : '新建公司'
      "
      :close-on-click-modal="false"
      :before-close="onCloseCompanyDialog"
    >
      <form-com
        :submitText="dialogTitleNum"
        :comId="comId"
        @onSubmit="formComSubmit"
      ></form-com>
    </td-layer>

    <td-layer
      top="6vh"
      width="850px"
      :visible.sync="dialogPowerBoolean"
      title="设置公司菜单权限"
      :close-on-click-modal="false"
      :before-close="onCloseMenuDialog"
    >
      <form-menu
        :comName="comName"
        :comId="comId"
        @onSubmit="formMenuSubmit"
      ></form-menu>
    </td-layer>
  </el-container>
</template>
<script>
import { companyManage } from '@/api/index'
import formCom from './formCom.vue'
import formMenu from './formMenu.vue'
import { debounce } from '@/utils/utils'

export default {
  name: 'company_manage',
  componentName: 'companyManage',
  components: { formCom, formMenu },
  data() {
    return {
      loading: false,
      dialogBoolean: false,
      dialogTitleNum: 0, // -1 查看 0 新建 1 编辑 ,
      comName: null,
      comId: null, // 公司Id
      searchForm: {
        name: ''
      },
      searchTerm: [
        {
          label: '公司名称',
          key: 'name',
          value: ''
        }
      ],
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      companyListTotal: 40,
      companyList: [{}],
      dialogPowerBoolean: false, // 权限dialog boolean
      menuTree: [],
      menuTreeProp: {
        children: 'children',
        label: 'menuName'
      },
      menuTreeCheck: null
    }
  },
  created() {
    this.getCompanyList()
  },
  watch: {
    searchTerm: {
      handler(newV, oldV) {
        console.log(newV)
        for (let i = 0; i < newV.length; i++) {
          this.searchForm[newV[i]['key']] = newV[i]['value']
        }
      },
      deep: true
    }
  },
  methods: {
    setTableRowStyle({ row, rowIndex }) {
      return { cursor: 'pointer' }
    },
    // 公司加载列表
    getCompanyList() {
      this.loading = true
      companyManage
        .getCompanyList({
          page: this.currentPage,
          pageSize: this.pageSize,
          param: this.searchForm
        })
        .then(res => {
          if (res.code === 200) {
            this.companyList = res.data.list
            this.companyListTotal = res.data.total
            this.loading = false
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error({
            message: '噢，发现错误，联系后台管理员',
            duration: 2000
          })
        })
    },
    // 开启dialog
    onCreateCompanyDialog() {
      this.dialogBoolean = true
      this.dialogTitleNum = 0
    },
    onCanleSearch() {
      for (let i = 0; i < this.searchTerm.length; i++) {
        this.searchTerm[i]['value'] = ''
      }
      this.getRoleList()
    },
    onSubmitSearchCompany: debounce(
      function() {
        this.currentPage = 1

        this.getCompanyList()
      },
      1000,
      true
    ),
    // 单项查看
    onHandleViewCompany(row, column, event) {
      this.comId = row.id
      this.dialogBoolean = true
      this.dialogTitleNum = -1
      companyManage
        .selectCompanyById({ id: row.id })
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            this.companyForm = res.data
            this.dialogBoolean = true
            this.dialogTitleNum = -1
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 单项编辑
    onHandleEditCompany(id) {
      this.comId = id
      this.dialogBoolean = true
      this.dialogTitleNum = 1
    },
    // 单项删除
    onHandleDeleteCompany(id, delFlag) {
      this.$confirm(`您确定要${delFlag ? '启用' : '禁用'}这个公司？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          companyManage
            .deleteCompany({ id, delFlag: delFlag ? 0 : 1 })
            .then(res => {
              if (res.code === 200) {
                this.$message.success({
                  message: res.message === 'ok' ? '修改状态成功' : res.message,
                  duration: 2000
                })
                this.getCompanyList()
              }
            })
            .catch(err =>
              this.$message.success({
                message: '噢，发现错误，联系后台管理员',
                duration: 2000
              })
            )
        })
        .catch(() => {})
    },
    formComSubmit(bool) {
      if (bool) this.getCompanyList()
      this.onCloseCompanyDialog()
    },
    onCloseCompanyDialog() {
      this.dialogBoolean = false
      this.dialogTitleNum = 0
      this.comId = null
    },
    // 设置权限
    onHandleSetCompany(name, id) {
      this.dialogPowerBoolean = true
      this.comId = id
      this.comName = name
    },
    formMenuSubmit(bool) {
      this.onCloseMenuDialog()
      if (bool) {
        this.getCompanyList()
      }
    },
    // 关闭权限设置dialog
    onCloseMenuDialog() {
      this.dialogPowerBoolean = false
      this.comId = null
      this.comName = null
    },

    // 单页条数 select
    onHandleSizeChange(val) {
      this.pageSize = val
      this.getCompanyList()
    },
    // 翻页动作
    onHandleCurrentChange(val) {
      this.currentPage = val
      this.getCompanyList()
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
$c-active: #ddd;
.page {
  height: 100%;
  flex-direction: column;
  .page-search {
    padding-bottom: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid $c-active;
    justify-content: center;
    align-items: center;

    .search-item {
      width: 33%;
      float: left;
      padding: 5px 10px;
      box-sizing: border-box;
      .search-label {
        width: 70px;
        text-align: right;
        margin-right: 4px;
        display: inline-block;
        font-size: 14px;
      }
      & /deep/ .el-input {
        width: calc(100% - 75px);
      }
    }
    .search-btns {
      display: flex;
      flex-direction: column;
    }
  }
  .page-fun {
    height: 40px;
    margin: 0 20px 12px 0;
    padding-top: 7px;
    box-sizing: border-box;
  }
  main {
    // .page 页面下el-dialog el-scrollbar
    .pager {
      text-align: center;
      margin: 60px 0;
    }
  }
  .el-dialog {
    // horizontal
    .el-scrollbar-vertical {
      height: 50vh;
      & /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }

  .user-scrollbar {
    height: 50vh;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>
